<template>
  <div class="stu" style="position: relative;">
       <topimg></topimg>
       <toptab :datext='datext' :shows='false'></toptab>
	  <div style="width:1100px;height:671px;margin: 0 auto;padding-top:42px;">
		  <div class="boxss">
			  <div class="bos" v-for="(i,index) in $store.state.xmxq" @click="xmxqc(index)">
				  <img :src="i.url1" alt="">
				  <div style="width: 100%;padding-top: 10px;text-align:left;">
					  <p class="ter1">{{i.title}}</p>
					  <p class="ter">{{i.value1}} </p>
				  </div>
			  </div>
		  </div>
	  </div>
  </div>
</template>

<script>
import topimg from '@/components/topimg.vue'
import toptab from '@/components/toptab.vue'
export default {
  name: 'stu',
  components: {topimg,toptab},//声明子组件
  computed:{},
  data(){
	  return {
		  num:0,
		  datext:{
			      
		  		  tetx1:'- 项目详情',
		  		  text2:'高亿科技项目的最新动态'
		  },
		  // data1:[ 
		  // 			  {src:'../../../img/cpzx/ccsAGV.png',text:'项目背景'},
		  // 			  {src:'../../../img/cpzx/ccsAGV.png',text:'项目引进的必要性'},
		  //             {src:'../../../img/cpzx/ccsAGV.png',text:'市场分析'},
				// 	  {src:'../../../img/cpzx/ccsAGV.png',text:'项目要求'},
		  // ],
		  
	  }
  },
  methods:{
	 xmxqc(index){
		 this.$router.push({path:'/xmxqc',query:{num:index}});
	 }
  },
  mounted(){
      this.$store.state.indexof = 5;
  }
}
</script>
<style scoped="scoped">
	.ter1{
		line-height:28px;font-size:16px;
		width: 100%;
		overflow: hidden;
		text-overflow:ellipsis;
		  white-space: nowrap;
	}
	.ter{
		width: 100%;
		font-size: 14px;
		color: #999999;
		 overflow: hidden;
		 text-overflow:ellipsis;
		   white-space: nowrap;
		   line-height: 22px;
	}
	.bos img{
		width: 100%;
		height:203px;
	}
	.bos{
		width: 339px;
		height: 273px;
	}
	.boxss{
		width:100%;
		height:611px;
		display:grid;
		grid-template-columns: repeat(3, 1fr); /* 相当于 1fr 1fr 1fr */
		grid-template-rows: repeat(2, 1fr); /* fr单位可以将容器分为几等份 */
		grid-gap:2.1%; /* grid-column-gap 和 grid-row-gap的简写 */
		grid-auto-flow: row;
		padding: 0 20px;
	}
</style>
